<template>
  <div class="dataScreen-container">
    <div class="dataScreen" ref="box">
      <div class="box" id="dataV1">
        <div style="width:100%;height:40%" class="border">
          <lineChart style="width:100%;height:100%" />
        </div>
        <div style="width:100%;height:30%" class="border">
          <barChart style="width:100%;height:100%" />
        </div>
        <div style="width:100%;height:30%" class="border">
          <funnelChart style="width:100%;height:100%" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lineChart from "./components/lineChart.vue";
import barChart from "./components/barChart.vue";
import funnelChart from "./components/funnelChart.vue";
import autofit from "autofit.js";
export default {
  components: { lineChart, barChart, funnelChart },
  data() {
    return {
      dataScreenRef: document.getElementsByClassName("box")[0]
    };
  },
  created() {},
  mounted() {
    // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
    // this.dataScreenRef = document.getElementsByClassName("box")[0];

    // // 初始化 echarts
    // // initCharts();
    // // 为浏览器绑定事件
    // window.addEventListener("resize", this.resize);
    // let box = document.getElementsByClassName("box")[0];
    //window的窗口变动事件
    // window.onresize = () => {
    //   box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
    // };
    // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
    if (this.dataScreenRef) {
      console.log(this.getScale());
      this.dataScreenRef.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
      this.dataScreenRef.style.width = `1920px`;
      this.dataScreenRef.style.height = `1080px`;
    }
    // 为浏览器绑定事件
    window.addEventListener("resize", this.resize);
  },

  methods: {
    getScale(width = 1920, height = 1080) {
      let ww = window.innerWidth / width;
      let wh = window.innerHeight / height;
      return ww < wh ? ww : wh;
    },
    resize() {
      if (this.dataScreenRef) {
        this.dataScreenRef.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
      }
    }
  }
};
</script>

<style scoped>
.dataScreen-container {
  width: 100%;
  height: 100%;
  background: url("./images/bg1.png") no-repeat;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;
}
.dataScreen {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s;
  transform-origin: left top;
}
.box {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  width: 100%;
  padding: 12px 42px 20px;
}
.border {
  border: 1px solid red;
}
</style>